<html>
<style>
    .c {
        margin: 1px;
        width: 19px;
        height: 19px;
        background: red;
        position: absolute;
    }

    .d {
        margin: 1px;
        width: 19px;
        height: 19px;
        background: gray;
        position: absolute;
    }

    .f {
        top: 0px;
        left: 0px;
        background: black;
        position: absolute;
    }
</style>
<title>俄罗斯方块</title>

<body>
</body>
<html>
<script>

    var over = false, shapes = ("0,1,1,1,2,1,3,1;1,0,1,1,1,2,2,2;2,0,2,1,2,2,1,2;0,1,1,1,1,2,2,2;1,2,2,2,2,1,3,1;1,1,2,1,1,2,2,2;0,2,1,2,1,1,2,2").split(";");
    function create(tag, css) {
        var elm = document.createElement(tag);
        elm.className = css;
        document.body.appendChild(elm);
        return elm;
    }

    function Tetris(c, t, x, y) {
        var c = c ? c : "c";
        this.divs = [create("div", c), create("div", c), create("div", c), create("div", c)];
        this.reset = function () {
            this.x = typeof x != 'undefined' ? x : 3;
            this.y = typeof y != 'undefined' ? y : 0;
            this.shape = t ? t : shapes[Math.floor(Math.random() * (shapes.length - 0.00001))].split(",");
            this.show();

            if (this.field && this.field.check(this.shape, this.x, this.y, 'v') == 'D') {
                over = true;
                this.field.fixShape(this.shape, this.x, this.y);
                alert('game over');
            }
        }

        this.show = function () {

            for (var i in this.divs) {
                this.divs[i].style.left = (this.shape[i * 2] * 1 + this.x) * 20 + 'px';
                this.divs[i].style.top = (this.shape[i * 2 + 1] * 1 + this.y) * 20 + 'px';
            }
        }

        this.field = null;

        this.hMove = function (step) {

            var r = this.field.check(this.shape, this.x - -step, this.y, 'h');

            if (r != 'N' && r == 0) {
                this.x -= -step;
                this.show();
            }
        }

        this.vMove = function () {

            if (this.field.check(this.shape, this.x, this.y - -1, 'v') == 'N') {
                this.y++;
                this.show();
            } else {
                this.field.fixShape(this.shape, this.x, this.y);
                this.field.findFull();
                this.reset();
            }
        }

        this.rotate = function () {

            var s = this.shape;
            var newShape = [3 - s[1], s[0], 3 - s[3], s[2], 3 - s[5], s[4], 3 - s[7], s[6]];
            var r = this.field.check(newShape, this.x, this.y, 'h');

            if (r == 'D') return;

            if (r == 0) {
                this.shape = newShape;
                this.show();
            } else if (this.field.check(newShape, this.x - r, this.y, 'h') == 0) {
                this.x -= r;
                this.shape = newShape;
                this.show();
            }
        }

        this.reset();
    }

    function Field(w, h) {

        this.width = w ? w : 10;
        this.height = h ? h : 20;
        this.show = function () {
            var f = create("div", "f")
            f.style.width = this.width * 20 + 'px';
            f.style.height = this.height * 20 + 'px';
        }

        this.findFull = function () {
            for (var l = 0; l < this.height; l++) {
                var s = 0;
                for (var i = 0; i < this.width; i++) {
                    s += this[l * this.width + i] ? 1 : 0;
                }
                if (s == this.width) {
                    this.removeLine(l);
                }
            }
        }

        this.removeLine = function (line) {
            for (var i = 0; i < this.width; i++) {
                document.body.removeChild(this[line * this.width + i]);
            }

            for (var l = line; l > 0; l--) {
                for (var i = 0; i < this.width; i++) {
                    this[l * this.width - -i] = this[(l - 1) * this.width - -i];
                    if (this[l * this.width - -i]) this[l * this.width - -i].style.top = l * 20 + 'px';
                }
            }
        }

        this.check = function (shape, x, y, d) {

            var r1 = 0, r2 = 'N';

            for (var i = 0; i < 8; i += 2) {
                if (shape[i] - -x < 0 && shape[i] - -x < r1) { r1 = shape[i] - -x; }
                else if (shape[i] - -x >= this.width && shape[i] - -x > r1) { r1 = shape[i] - -x; }
                if (shape[i + 1] - -y >= this.height || this[shape[i] - -x - -(shape[i + 1] - -y) * this.width]) { r2 = 'D' }
            }

            if (d == 'h' && r2 == 'N') return r1 > 0 ? r1 - this.width - -1 : r1;

            else return r2;
        }

        this.fixShape = function (shape, x, y) {

            var d = new Tetris("d", shape, x, y);
            d.show();
            for (var i = 0; i < 8; i += 2) {
                this[shape[i] - -x - -(shape[i + 1] - -y) * this.width] = d.divs[i / 2];
            }
        }
    }

    var f = new Field();
    f.show();

    var s = new Tetris();
    s.field = f;
    s.show();
    window.setInterval("if(!over)s.vMove();", 500);
    document.onkeydown = function (e) {
        if (over) return;
        var e = window.event ? window.event : e;
        switch (e.keyCode) {
            case 38: //up
                s.rotate();
                break;
            case 40: //down
                s.vMove();
                break;
            case 37: //left
                s.hMove(-1);
                break;
            case 39: //right
                s.hMove(1);
                break;
        }
    }
</script>